<script lang='ts' setup>
import { useResizeable, ResizeArea } from './resizeable'
const offset = defineModel('offset',{ type: Number , default: 50 })
const resizeable = defineModel<boolean>("resizeable", {
  type: Boolean,
  default: false
});
let lastOffset = offset.value;
let lastResizeable = resizeable.value;

const offsetWindowRef = ref<HTMLDivElement>()
const offsetWindowInnerRef = ref<HTMLDivElement>()
const [_, { handleMouseDown, handleMouseUp, handlerMouseOver }] = useResizeable()

onMounted(() => {
  window.electron.ipcRenderer.on('application:toggle-maximize-window', (_, _isMaximize) => {
    if (_isMaximize) {
      lastOffset = offset.value;
      lastResizeable = resizeable.value;
      offset.value = 0;
      resizeable.value = false;
    } else {
      offset.value = lastOffset;
      resizeable.value = lastResizeable;
    }
  })
})

onUnmounted(() => {
  window.electron.ipcRenderer.removeAllListeners('application:toggle-maximize-window')
})


function handleClickOffsetWindowRef(e: MouseEvent) {
  const offsetValue = offset.value - 10;
  if (e.x < offsetValue || e.x > offsetWindowInnerRef.value?.clientWidth! + offsetValue ||
    e.y < offsetValue || e.y > offsetWindowInnerRef.value?.clientHeight! + offsetValue
  ) {
    window.electron.ipcRenderer.send('application:minimize-window')
  }
}



</script>

<template >
  <div @click="handleClickOffsetWindowRef"
  ref="offsetWindowRef" class="offset-window">
    <div ref="offsetWindowInnerRef" class="offset-window__inner" :style="{
      '--offset-window-size': `${offset}px`,
      '--inner-window-width': `calc(100vw - var(--offset-window-size) * 2)`,
      '--inner-window-height': `calc(100vh - var(--offset-window-size) * 2)`
    }">

      <template v-if="resizeable">
        <div
        @mousedown="handleMouseDown(ResizeArea.LEFT)"
        @mouseup="handleMouseUp(ResizeArea.LEFT)"
        @mouseover="handlerMouseOver(ResizeArea.LEFT)"
        class="move-handle left-handle ew-handle"></div>
        <div @mousedown="handleMouseDown(ResizeArea.RIGHT)"
        @mouseup="handleMouseUp(ResizeArea.RIGHT)"
        @mouseover="handlerMouseOver(ResizeArea.RIGHT)" class="move-handle right-handle ew-handle"></div>

        <div @mousedown="handleMouseDown(ResizeArea.TOP)"
        @mouseup="handleMouseUp(ResizeArea.TOP)"
        @mouseover="handlerMouseOver(ResizeArea.TOP)" class="move-handle top-handle ns-handle"></div>
        <div @mousedown="handleMouseDown(ResizeArea.TOP_RIGHT)"
        @mouseup="handleMouseUp(ResizeArea.TOP_RIGHT)"
        @mouseover="handlerMouseOver(ResizeArea.TOP_RIGHT)"class="move-handle right-top-handle nesw-handle"></div>
        <div @mousedown="handleMouseDown(ResizeArea.TOP_LEFT)"
        @mouseup="handleMouseUp(ResizeArea.TOP_LEFT)"
        @mouseover="handlerMouseOver(ResizeArea.TOP_LEFT)" class="move-handle left-top-handle nwse-handle"></div>

        <div @mousedown="handleMouseDown(ResizeArea.BOTTOM)"
        @mouseup="handleMouseUp(ResizeArea.BOTTOM)"
        @mouseover="handlerMouseOver(ResizeArea.BOTTOM)" class="move-handle bottom-handle ns-handle"></div>
        <div @mousedown="handleMouseDown(ResizeArea.BOTTOM_RIGHT)"
        @mouseup="handleMouseUp(ResizeArea.BOTTOM_RIGHT)"
        @mouseover="handlerMouseOver(ResizeArea.BOTTOM_RIGHT)" class="move-handle right-bottom-handle nwse-handle"></div>
        <div @mousedown="handleMouseDown(ResizeArea.BOTTOM_LEFT)"
        @mouseup="handleMouseUp(ResizeArea.BOTTOM_LEFT)"
        @mouseover="handlerMouseOver(ResizeArea.BOTTOM_LEFT)" class="move-handle left-bottom-handle nesw-handle"></div>
      </template>
      <slot />
    </div>
  </div>
</template>

<style scoped lang='less'>


.offset-window {
  position: relative;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100vw;
  height: 100vh;
  .offset-window__inner {
    position: absolute;
    transition: 0s all;
    width: var(--inner-window-width);
    height: var(--inner-window-height);
    top: var(--offset-window-size);
    left: var(--offset-window-size);
    border-radius: 4px;
    box-shadow: var(--el-box-shadow-dark);
    background-color: #fff;

    --handle-width: 4px;
    .move-handle {
      position: absolute;
    }

    .ew-handle {
      cursor: ew-resize;
    }

    .ns-handle {
      cursor: ns-resize;
    }

    .nesw-handle {
      cursor: nesw-resize;
    }

    .nwse-handle {
      cursor: nwse-resize;
    }

    .left-handle {
      left: calc(var(--handle-width) / 2 * -1);
      top: var(--handle-width);
      width: var(--handle-width);
      bottom: var(--handle-width);
    }
    .right-handle {
      right: calc(var(--handle-width) / 2 * -1);
      top: var(--handle-width);
      width: var(--handle-width);
      bottom: var(--handle-width);
    }

    .top-handle {
      top: calc(var(--handle-width) / 2 * -1);
      left: var(--handle-width);
      height: var(--handle-width);
      right: var(--handle-width);
    }

    .bottom-handle {
      bottom: calc(var(--handle-width) / 2 * -1);
      left: var(--handle-width);
      right: var(--handle-width);
      height: var(--handle-width);
    }

    .right-top-handle {
      top:  calc(var(--handle-width) / 2 * -1);
      right: calc(var(--handle-width) / 2 * -1);
      width:  calc(var(--handle-width) * 2);
      height: calc(var(--handle-width) * 2);
    }

    .right-bottom-handle {
      bottom: calc(var(--handle-width) / 2 * -1);
      right: calc(var(--handle-width) / 2 * -1);
      width:  calc(var(--handle-width) * 2);
      height: calc(var(--handle-width) * 2);
    }

    .left-top-handle {
      top: calc(var(--handle-width) / 2 * -1);
      left: calc(var(--handle-width) / 2 * -1);
      width:  calc(var(--handle-width) * 2);
      height: calc(var(--handle-width) * 2);
    }

    .left-bottom-handle {
      bottom: calc(var(--handle-width) / 2 * -1);
      left: calc(var(--handle-width) / 2 * -1);
      width:  calc(var(--handle-width) * 2);
      height: calc(var(--handle-width) * 2);
    }
  }
}

</style>
